<template>
  <div v-bind="formItemLayout">
    <Form
      :model="formState"
      ref="formRef"
      layout="inline"
      class="form-wrapper"
      :labelCol="{ span: 8 }"
      :wrapperCol="{ span: 4 }"
    >
      <FormItem name="tenantList" label="租户">
        <Select
          v-model:value="formState.tenantNames"
          :options="tenantList"
          mode="multiple"
          maxTagCount="responsive"
          placeholder="请选择"
          :style="{ width: '270px' }"
        ></Select>
      </FormItem>

      <FormItem name="appList" label="应用">
        <Select
          v-model:value="formState.appNames"
          mode="multiple"
          maxTagCount="responsive"
          :options="appList"
          placeholder="请选择"
          :style="{ width: '270px' }"
        ></Select>
      </FormItem>

      <FormItem name="compoList" label="组件">
        <Select
          v-model:value="formState.compoNames"
          :options="compoList"
          placeholder="请选择"
          mode="multiple"
          maxTagCount="responsive"
          :disabled="!isAppSelected"
          :style="{ width: '270px' }"
        ></Select>
      </FormItem>

      <FormItem name="date" label="日期">
        <RangePicker class="w-300px" v-model:value="formState.date"></RangePicker>
      </FormItem>

      <div class="btn-wrapper">
        <Button @click="reset">重置</Button>
        <Button type="primary" style="margin-left: 10px" @click="search" :disabled="isDisabled">查询</Button>
      </div>
    </Form>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { Button, DatePicker, Form, FormItem, Select } from 'ant-design-vue';
import { getAppList, getCompoList, getTenantList } from '/@/api/measurement-center/source-statistic/sourceStatistic';

const formState = ref({
  tenantNames: undefined,
  appNames: undefined,
  compoNames: undefined,
  date: undefined,
});
const { RangePicker } = DatePicker;

const isAppSelected = ref(false);

const defaultParams = ref({
  startDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000 - 7 * 24 * 60 * 60 * 1000)
    .toJSON()
    .split('T')
    .join(' ')
    .substr(0, 19)
    .split(' ')[0],
  endDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000)
    .toJSON()
    .split('T')
    .join(' ')
    .substr(0, 19)
    .split(' ')[0],
});

const appList = ref<any[]>([]);

let compoList = ref<any[]>([]);
const isDisabled = ref(false);
const tenantList = ref<any[]>([]);

const emit = defineEmits(['get']);

const formRef = ref();
const formItemLayout = {
  labelCol: { span: 16 },
  wrapperCol: { span: 24 },
};

watch(
  () => formState.value.appNames,
  async (val: any) => {
    formState.value.appNames = val;
    if (val) {
      isAppSelected.value = true;

      compoList.value = await getCompoList(val);
      isDisabled.value = true;
    }
  }
);

watch(
  () => formState.value.compoNames,
  (val: any) => {
    formState.value.compoNames = val;
    if (val) {
      isDisabled.value = false;
    }
  }
);

onMounted(async () => {
  tenantList.value = await getTenantList();
  appList.value = await getAppList();
});

const search = () => {
  emit('get', {
    tenantCodeList: formState.value.tenantNames,
    componentIdList: formState.value.compoNames,
    date: formState.value.date,
    startDate: defaultParams.value.startDate,
    endDate: defaultParams.value.endDate,
  });
};

const reset = () => {
  isAppSelected.value = false;
  formState.value = {
    tenantNames: undefined,
    compoNames: undefined,
    appNames: undefined,
    date: undefined,
  };
  let selectedRowKeys = [];
  emit('get', {
    selectedRowKeys: selectedRowKeys,
    tenantCodeList: formState.value.tenantNames,
    componentIdList: formState.value.compoNames,
    date: formState.value.date,
    startDate: defaultParams.value.startDate,
    endDate: defaultParams.value.endDate,
  });
};
</script>
<style lang="less">
.form-wrapper {
  padding: 20px 0;
  .ant-form-item {
    .ant-form-item-control-input {
      width: 270px !important;
    }
    .ant-calendar-picker-input {
      width: 250px;
    }
  }
}
.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  padding: 0px 20px;
}
</style>
